<template>
  <div class="index-box" ref="index" v-loading="loading">
    <div class="topBox d-flex justify-center">配置会员<span class='red'>{{phone}}({{name}})</span>管辖范围</div>
    <div class="topTips d-flex justify-center">会员等级：<span v-for="(item,index) in levelList" @click="handleLevel(item)" style="cursor: pointer;font-weight: bold;">{{item.name}} <i v-if="levelList.length!=index+1">丶 </i></span></div>
    <div class="levelList" v-if="levelList.length!='1'">
      <el-radio-group v-model="levelId">
        <el-radio :label="item.levelId" v-for="item in levelList" @change="changeLevel">{{item.name}}</el-radio>
      </el-radio-group>
    </div>
    <div class="treeList">
      <el-tree
        :props="props"
        :load="loadNode"
        :data="dataList"
        ref="tree"
        node-key="code"
        lazy
        highlight-current
        accordion
        :check-on-click-node="true"

        show-checkbox>
      </el-tree>
    </div>
    <div class="active d-flex justify-center">
      <el-button @click="handleSure" type="primary" :loading="btnLoading">确定</el-button>
    </div>


    <!-- 等级下的区域 -->
      <el-dialog :title="levelAreaTitle" width="900px" v-dialogDrag :visible.sync="levelAreaVisible" @close="levelAreaVisible = false" append-to-body>

          <el-table :data="levelAreaTable" style="width: 100%;"  border   stripe>
            <el-table-column type="index"  label="编号"  width="80" align="center"></el-table-column>
            <el-table-column label="地区"  >
              <template slot-scope="scope">
                <span>{{ scope.row}}</span>
              </template>
            </el-table-column>
          </el-table>

      </el-dialog>

    </el-dialog>
  </div>
</template>

<script>
  import common from '@/api/api';
  import { selJurisdictionByTwoId,getAllJurisdiction,getAreaList,getRegionProvince,setJurisdiction,setAreaRegion,updJurisdiction,getJurisdictionAndLevel,getRegionList } from '@/api/getData';
  import option from '../../common/option.js';
  let state = [];
  export default {
    data() {
      return {
        loading: false,
        btnLoading: false,
        customerId:'',
        name:'',
        phone:'',
        props: {
          label: 'name',
          children: 'children',
          isLeaf: 'leaf'
        },
        dataList:[],
        levelId:'',
        levelList:[],//当前会员等级
        checkNumber:0,//当前会员可勾选社区的个数
        checkArr:[],//当前会员勾选社区的key集合
        checkDisabledArr:[],//已经被选中的社区不可勾选 需要禁止

        levelAreaVisible:false,
        levelAreaTable:[],
        levelAreaTitle:""
      }
    },
    mounted() {
      this.customerId = this.$route.query.customerId;
      this.name = this.$route.query.name;
      this.phone = this.$route.query.phone;
      this.dataInfo();
    },
    methods: {
      handleLevel(row){
        this.levelAreaVisible = true;
        this.levelAreaTitle = `${row.name}下的管辖范围`;
        selJurisdictionByTwoId({customerId:this.customerId,levelId:row.levelId}).then(res=>{
          this.levelAreaTable = res.data;
        })
      },
      changeLevel(){
        console.log(123)
        this.$refs.tree.setCheckedKeys([]);
      },
      /*		加载列表数据		*/
      dataInfo() {
      		this.loading = true;
          this.getSelectList('administrative_area_list').then(res=>{
            let data = res.data;
            data.map(item=>{
                item.disabled = true;
                item.leaf = false;
                item.name = item.dictLabel;
                item.code = item.dictValue;
            })
            this.dataList = data;
          })
          getAllJurisdiction().then((res1)=>{
            getJurisdictionAndLevel({customerId: this.customerId}).then((res)=>{
              this.levelList = res.data;
              console.log(this.levelList)
              this.levelId = res.data[0].levelId;
              this.checkArr = res.data[0].codeStr?res.data.codeStr[0].split(','):[];
              console.log('当前选中')
              console.log(this.checkArr);
              this.checkNumber = res.data.length;

              let presentArea = res.data[0].codeStr?res.data.codeStr[0].split(','):[];
              let allArea =  res1.data.codeStr?res1.data.codeStr.split(','):[];
              let unique = [];
              for(var i=0; i < allArea.length; i++) {
                if(presentArea.indexOf(allArea[i]) == -1) {
                  unique.push(allArea[i]);
                }
              }
              this.checkDisabledArr = unique;
              console.log('禁止选中的数组');
              console.log(unique);
            })
          })
          this.loading = false;
      },
      handleCheckChange(data, checked, indeterminate) {
        console.log('勾选');
        console.log(data, checked, indeterminate)
        // let index = this.checkArr.indexOf(data.code);
        // if(index == '-1'){
        //   this.checkArr.push(data.code)
        // }else{
        //   this.checkArr.splice(index,1)
        // }
      },
      async handleSure(){
       // console.log(this.$refs.tree.getCheckedKeys());
         //this.$refs.tree.setCheckedKeys([3]);
        let data = this.$refs.tree.getCheckedKeys();
        let codeStr = data.join(',');
        this.btnLoading = true;
        let res = await updJurisdiction({codeStr: codeStr,customerId:this.customerId,levelId:this.levelId});
        if(res.code == 200){
          this.$message.success(res.msg);
          setTimeout((res)=>{
             this.$router.go(-1);
          })
        }else{
           this.$message.error(res.msg)
        }

      },
       async loadNode(node, resolve) {
         let that = this
         // 第一层的数据
         if(node.level == 1){
           let res = await getRegionProvince({regionId: node.data.code});
           let resArr = res.data;
           resArr.map(item=>{
              item.leaf = false;
              item.disabled = true;
           })
           that.$refs.tree.updateKeyChildren(node.data.code, resArr)
           resolve(resArr);
         }else if (node.level > 1) {
           let res = await getRegionList({pcode: node.data.code});
           if(res.code == 200){
              let resArr = res.data;
              resArr.map(item=>{
                 item.leaf = (node.level==5);
                 item.disabled = (node.level==5?(this.checkDisabledArr.indexOf(item.code)!='-1'?true:false):true)
              });
              that.$refs.tree.updateKeyChildren(node.data.code, resArr)
              resolve(resArr);
              console.log('node.level'+node.level)
              if(node.level==6){/*设置回填*/
                // console.log('回填');
                // console.log(that.checkArr)
                //setTimeout(()=>{that.$refs.tree.setCheckedKeys(that.checkArr)},2000);
              }
           }

         }
      },
      handleNodeClick(data){/*树节点点击事件*/
        console.log(data);
      },

    }
  }
</script>

<style scoped lang="scss">
  .levelList{
    padding-left:25px;
  }
  .treeList{
    height:calc(100% - 95px);
    overflow-y: auto;
  }
  .index-box /deep/ .el-tree {
      padding-top: 15px;
      padding-left: 10px;
      // 不可全选样式
      .el-tree-node {
          .is-leaf + .el-checkbox .el-checkbox__inner {
              display: inline-block;
          }
          .el-checkbox .el-checkbox__inner {
              display: none;
          }
      }
  }

  .index-box{
    height:100px;
    overflow-y: auto;
  }
  .title{
    margin:0px;
    font-size: 16px;
    color:#606266;
  }
  .treeList{
    margin-bottom: 10px;
  }
  .topBox{
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
  }
  .topTips{
    font-size: 13px;
  }
</style>
